import * as echarts from 'echarts';
import { useEffect } from 'react'
import React from 'react';
const BarChart = (prpos) => {
  const { data = [] } = prpos
  const archiveListBy2023 = data
  const archiveListBy2024 = data
  let setColor = function (colorArr) {
    let color = {
      type: "linear",
      x: 0,
      x2: 1,
      y: 0,
      y2: 0,
      /* 此处决定阴暗面 若为横向柱状图则x,y轴调换
        x: 0,
        x2: 0,
        y: 0,
        y2: 1, */
      colorStops: [{
        offset: 0,
        color: colorArr[0],
      },
      {
        offset: 0.5,
        color: colorArr[0],
      },
      {
        offset: 0.5,
        color: colorArr[1],
      },
      {
        offset: 1,
        color: colorArr[1],
      },
      ],
    };
    return color
  }
  var colorArr1 = ["#345A8B", "#387ABD", "#51C0DB"];
  var colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];

  var color1 = setColor(colorArr1)
  var color2 = setColor(colorArr2)
  let option2 = {
    //  backgroundColor: '#00265f',
    tooltip: {
      trigger: 'axis',
      formatter: (data) => {
        console.log(data)
        return `${data[0].axisValue}<br/>
        <span style="color:${data[0].color.colorStops[2].color}"><span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${data[0].color.colorStops[2]?.color};\"></span>${data[0].seriesName}:${data[0].data}</span><br/>` + (data[1] ? `
        <span style="color:${data[1]?.color.colorStops[2].color}"><span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${data[1]?.color.colorStops[2].color};\"></span>${data[1]?.seriesName}:${data[1]?.data}</span>` : ``)
      },
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(74, 211, 164, 0.15)'
        },
      },
    },
    title: {
      text: '年度营收同比',
      x: 'center',
      textStyle: {
        color: '#9ebed4',
        fontWeight: '400',
        fontSize: 12
      },
    },
    grid: {
      left: '0%',
      top: '20%',
      right: '0%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: data.map(v => v.label),
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1)",
          width: 1,
          type: "solid"
        },
      },

      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        // rotate: 50,
        show: true,
        splitNumber: 15,
        color: "#fff",
        fontSize: 8,
      },
      inverse: false,
      animationDuration: 300,
      animationDurationUpdate: 300,
      // max: 6 // only the largest 3 bars will be displayed
    }],
    yAxis: [{
      type: 'value',
      axisLabel: {
        // formatter: '{value} %',
        show: true,
        color: "rgba(255,255,255,.6)",
        fontSize: '12',
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1	)",
          width: 1,
          type: "solid"
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        }
      },
      max: 'dataMax'
    }],
    series: [
      {
        z: 0,
        name: '2023年',
        type: "pictorialBar",
        itemStyle: {
          color: colorArr1[1]
        },
      },//图例颜色
      {
        z: 3,
        name: '2023年',
        type: "pictorialBar",
        symbolPosition: "end",
        data: archiveListBy2023.map(v => v.value),//此数据对应顶部组件
        symbol: "diamond",
        symbolOffset: [-7.7, "-50%"],
        symbolSize: [7, 4],
        itemStyle: {
          borderColor: colorArr1[2],
          borderWidth: .8,
          color: colorArr1[2]
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 1,
        name: '2023年',
        type: 'bar',
        data: archiveListBy2023.map(v => v.value),
        barWidth: '8px', //柱子宽度
        barGap: 1, //柱子之间间距
        itemStyle: {
          color: color1,
          opacity: 1,
          borderRadius: 2,
        },
        emphasis: {
          itemStyle: {
            color: color1 // 选中柱颜色
          }
        },
        // realtimeSort: true,
        // label: {
        //   show: true,
        //   position: 'top',
        //   valueAnimation: true
        // }
      },
      {
        z: 2,
        name: '2023年',
        type: "pictorialBar",
        data: archiveListBy2023.map(v => v.value),//此数据对应底部组件
        symbol: "diamond",//底部组件形状，不写默认为椭圆
        symbolOffset: [-7.7, '50%'],//与柱子的偏移角度
        symbolSize: [7, 4],//底面[宽，高]
        itemStyle: {
          color: color1//底面左右颜色（深，浅）
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 0,
        name: '2024年',
        type: "pictorialBar",
        itemStyle: {
          color: colorArr2[1]
        },
      },
      {
        z: 3,
        name: '2024年',
        type: "pictorialBar",
        symbolPosition: "end",
        data: archiveListBy2024.map(v => v.value2),//此数据对应顶部组件
        symbol: "diamond",
        symbolOffset: [7.7, "-50%"],
        symbolSize: [7, 4],
        itemStyle: {
          borderColor: colorArr1[2],
          borderWidth: .8,
          color: colorArr1[2]
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 1,
        name: '2024年',
        type: 'bar',
        data: archiveListBy2024.map(v => v.value2),
        barWidth: '8px', //柱子宽度
        itemStyle: {
          color: color2,
          opacity: 1,
          borderRadius: 2,
        },
        // realtimeSort: true,
        emphasis: {
          itemStyle: {
            color: color2 // 选中柱颜色
          }
        },
        // label: {
        //   show: true,
        //   position: 'top',
        //   valueAnimation: true
        // }
      },
      {
        z: 2,
        name: '2024年',
        type: "pictorialBar",
        data: archiveListBy2024.map(v => v.value2),//此数据对应底部组件
        symbol: "diamond",//底部组件形状，不写默认为椭圆
        symbolOffset: [7.7, '50%'],//与柱子的偏移角度
        symbolSize: [7, 4],//底面[宽，高]
        itemStyle: {
          color: color2//底面左右颜色（深，浅）
        },
        tooltip: {
          show: false,
        },
      },
    ],
    legend: {
      x: 'right',
      icon: 'rect',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: { // 图例文字的样式
        color: [color1, color2],
      }
    },
    animationDuration: 3000,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  };

  useEffect(() => {
    if (!data.length) return
    var myChart2 = echarts.init(document.getElementById('BarChart'));
    myChart2.setOption(option2);
    myChart2.on('legendselectchanged', function (event) {
      option2.series[1].symbolOffset[0] = event.selected['2023年'] && event.selected['2024年'] ? -7.7 : 0;
      option2.series[3].symbolOffset[0] = event.selected['2023年'] && event.selected['2024年'] ? -7.7 : 0;
      option2.series[5].symbolOffset[0] = event.selected['2023年'] && event.selected['2024年'] ? 7.7 : 0;
      option2.series[7].symbolOffset[0] = event.selected['2023年'] && event.selected['2024年'] ? 7.7 : 0;
      myChart2.setOption(option2);
    });
    window.addEventListener("resize", function () {
      myChart2.resize();
    });
  }, [data])

  return (
    <>
      <div className="allnav" id="BarChart" style={{ width: '100%', height: '140px' }}></div>
    </>
  )
}

export default BarChart